<template>
  <el-dialog
    v-model="showDialog"
    :title="formData.id ? t('updateDistributorConfig') : t('addDistributorConfig')"
    width="50%"
    class="diy-dialog-wrap"
    :destroy-on-close="true"
  >
    <el-form
      :model="formData"
      label-width="120px"
      ref="formRef"
      :rules="formRules"
      class="page-form"
      v-loading="loading"
    >
      <el-form-item :label="t('key')" prop="key">
        <el-input
          v-model="formData.key"
          clearable
          :placeholder="t('keyPlaceholder')"
          class="input-width"
        />
      </el-form-item>

      <el-form-item :label="t('value')" prop="value">
        <el-input
          v-model="formData.value"
          clearable
          :placeholder="t('valuePlaceholder')"
          class="input-width"
        />
      </el-form-item>

      <el-form-item :label="t('remark')">
        <el-input
          v-model="formData.remark"
          clearable
          :placeholder="t('remarkPlaceholder')"
          class="input-width"
        />
      </el-form-item>
    </el-form>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="showDialog = false">{{ t("cancel") }}</el-button>
        <el-button type="primary" :loading="loading" @click="confirm(formRef)">{{
          t("confirm")
        }}</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref, reactive, computed, watch } from "vue";
import { t } from "@/lang";
import type { FormInstance } from "element-plus";
import {
  addDistributorConfig,
  editDistributorConfig,
  getDistributorConfigInfo,
} from "@/app/api/distributor";

let showDialog = ref(false);
const loading = ref(false);

/**
 * 表单数据
 */
const initialFormData = {
  id: "",
  key: "",
  value: "",
  remark: "",
};
const formData: Record<string, any> = reactive({ ...initialFormData });

const formRef = ref<FormInstance>();

// 表单验证规则
const formRules = computed(() => {
  return {
    key: [{ required: true, message: t("keyPlaceholder"), trigger: "blur" }],
    value: [{ required: true, message: t("valuePlaceholder"), trigger: "blur" }],
    remark: [{ required: true, message: t("remarkPlaceholder"), trigger: "blur" }],
  };
});

const emit = defineEmits(["complete"]);

/**
 * 确认
 * @param formEl
 */
const confirm = async (formEl: FormInstance | undefined) => {
  if (loading.value || !formEl) return;
  let save = formData.id ? editDistributorConfig : addDistributorConfig;

  await formEl.validate(async (valid) => {
    if (valid) {
      loading.value = true;

      let data = formData;

      save(data)
        .then((res) => {
          loading.value = false;
          showDialog.value = false;
          emit("complete");
        })
        .catch((err) => {
          loading.value = false;
        });
    }
  });
};

// 获取字典数据

const setFormData = async (row: any = null) => {
  Object.assign(formData, initialFormData);
  loading.value = true;
  if (row) {
    const data = await (await getDistributorConfigInfo(row.id)).data;
    if (data)
      Object.keys(formData).forEach((key: string) => {
        if (data[key] != undefined) formData[key] = data[key];
      });
  }
  loading.value = false;
};

defineExpose({
  showDialog,
  setFormData,
});
</script>

<style lang="scss" scoped></style>
<style lang="scss">
.diy-dialog-wrap .el-form-item__label {
  height: auto !important;
}
</style>
